import { motion } from 'framer-motion';
import { useState, useEffect } from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import ProductCard from '../components/ProductCard';
import { useLanguage } from '@/contexts/LanguageContext';
import { getImageUrl } from '@/lib/utils';

import { products } from '@/lib/mockData';

// 产品分类
const categories = [
  { id: 'all', nameKey: 'allCategories' },
  { id: 'handTools', nameKey: 'handTools' },
  { id: 'powerTools', nameKey: 'powerTools' },
  { id: 'measuringTools', nameKey: 'measuringTools' },
  { id: 'fasteners', nameKey: 'fasteners' }
];

export default function Shop() {
  const { t } = useLanguage();
  const [activeCategory, setActiveCategory] = useState('all');
  const [filteredProducts, setFilteredProducts] = useState(products);

  useEffect(() => {
    if (activeCategory === 'all') {
      setFilteredProducts(products);
    } else {
      setFilteredProducts(products.filter(product => product.categoryKey === activeCategory));
    }
  }, [activeCategory]);

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-grow">
        {/* Shop Hero Section */}
        <section className="relative h-64 md:h-80 flex items-center">
  <div className="absolute inset-0 z-0">
    <img 
      src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Hardware%20tools%20display%20in%20our%20store&sign=1828a500d57b52251466316032da1d3b" 
      alt={t('shopHeroAlt')} 
      className="w-full h-full object-cover"
    />
    <div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/20"></div>
  </div>
  
  <div className="container mx-auto px-4 relative z-10">
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8 }}
    >
      <h1 className="text-3xl md:text-5xl font-bold text-white mb-4">{t('shopTitle')}</h1>
      <p className="text-lg md:text-xl text-gray-100 max-w-2xl">{t('shopSubtitle')}</p>
    </motion.div>
  </div>
</section>
        
        {/* Shop Content */}
        <section className="py-16 bg-gray-50">
          <div className="container mx-auto px-4">
            {/* Category Filters */}
            <div className="mb-12">
               <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.5 }}
                 viewport={{ once: true }}
               >
                 <div className="flex flex-wrap gap-3 mb-2">
                   {categories.map(category => (
                     <button
                       key={category.id}
                       onClick={() => setActiveCategory(category.id)}
                       className={`px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105 ${
                         activeCategory === category.id
                           ? 'bg-blue-600 text-white shadow-lg shadow-blue-200/30'
                           : 'bg-white text-gray-700 hover:bg-gray-50 shadow-md hover:shadow-lg'
                       }`}
                     >
                       {t(category.nameKey)}
                     </button>
                   ))}
                 </div>
               </motion.div>
            </div>
            
            {/* Products Grid */}
             {filteredProducts.length > 0 ? (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                 {filteredProducts.map((product, index) => (
                   <motion.div
                     key={product.id}
                     initial={{ opacity: 0, y: 30, scale: 0.95 }}
                     whileInView={{ opacity: 1, y: 0, scale: 1 }}
                     transition={{ duration: 0.5, delay: index * 0.05, ease: "easeOut" }}
                     viewport={{ once: true }}
                   >
                     <div className="group relative overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                       <ProductCard product={product} />
                         {/* 点击商品卡片进入详情页 */}
                     </div>
                   </motion.div>
                 ))}
               </div>
            ) : (
               <motion.div
                 initial={{ opacity: 0, scale: 0.95 }}
                 animate={{ opacity: 1, scale: 1 }}
                 transition={{ duration: 0.5 }}
                 className="text-center py-16 bg-white rounded-xl shadow-md"
               >
                 <div className="w-24 h-24 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4">
                   <i className="fa-solid fa-box-open text-4xl text-gray-300"></i>
                 </div>
                 <h3 className="text-xl font-semibold text-gray-800 mb-2">{t('noProductsFound')}</h3>
                 <p className="text-gray-600 max-w-md mx-auto mb-6">{t('tryDifferentCategory')}</p>
                 <button
                   onClick={() => setActiveCategory('all')}
                   className="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors shadow-md hover:shadow-lg"
                 >
                   <i className="fa-solid fa-th-list mr-2"></i>{t('viewAllProducts')}
                 </button>
               </motion.div>
            )}
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}